<template>
  <div class="weekend-trip">
    <h2 class="trip-title">周末去哪儿</h2>
    <div v-for="item of list" :key="item.id">
      <div class="mp-product-item">
        <a href="#" class="mp-fulllink">
          <div class="product-imgcontainer image-ready">
            <img :src="item.imgurl" alt="">
          </div>
          <div class="mp-product-info">
            <p class="product-name">{{ item.title }}</p>
            <p class="product-desc">{{ item.introduce}}</p>
          </div>
        </a>
      </div>
    </div>
    <div class="mp-price-desc">
      <span class=""></span>
      <div class="mp-price-desc-info">
        <span class="mp-price-desc-highlight">票面价</span>是指通过景区指定窗口售卖的纸质门票上标注的价格
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Recommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
.trip-title
 height 0.8rem
 padding-left 0.26rem
 line-height 0.8rem
 color #212121
.mp-product-item
 position relative
 margin-bottom 0.1rem
 background-color #fff
.mp-fulllink
 display block
 width 100%
 height 100%
.product-imgcontainer
 overflow hidden
 height 0
 padding-bottom 37.4375%
 img
  width 100%
.mp-product-info
 position relative
 padding 0.14rem 0.2rem 0.2rem 0.2rem
.product-name
 overflow hidden
 padding-right 1.4rem
 color #212121
 font-size 0.28rem
 line-height 0.48rem
 white-space nowrap
 text-overflow ellipsis
.product-desc
 overflow: hidden;
 padding-right: 1.4rem;
 color: #616161;
 font-size: .24rem;
 line-height: .42rem;
 white-space: nowrap;
 text-overflow: ellipsis;
.mp-price-desc
 margin-top .1rem
 padding .14rem .1rem
 font-size .24rem
 line-height .32rem
 background #fff
 color #616161
 .mp-price-desc-info
  margin-left 0.3rem
  .mp-price-desc-highlight
   font-weight: bold
</style>
